<!--
 * @Description: 测试useVmodel的单选组件
 * @Author: ZhangHan
 * @Date: 2025-08-07 11:31:51
 * @LastEditTime: 2025-08-11 10:05:25
 * @LastEditors: ZhangHan
-->
<template>
  <view class="radio">
    <view
      v-for="(item, index) in option"
      :key="index"
      :class="{ item_radio: true, active: item.value == checked }"
      @click="seletItem(item)"
    >
      {{ item.label }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { useVModel } from "@/hooks/useVmodel";
import { ref } from "vue";

defineOptions({ name: "ProRadioSelect" });

const props = defineProps<{
  option: { label: String; value: number | string }[];
  checked?: number | string;
}>();

const emits = defineEmits(["update:checked"]);

const checked = useVModel(props, "checked", emits);

const seletItem = (val: any) => {
  if (checked.value == val.value) {
    checked.value = undefined;
    return;
  }
  checked.value = val.value;
};
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
